<template>
  <van-form @submit="onSubmit">
    <div class="house-job">
      <div class="xixi">
        <div class="header">
          <van-icon name="arrow-left" class="tubiao" @click="$router.back()" />
          <span>家政求职</span>
        </div>
        <div class="acticle">
          <div class="box"><span class="chunk"></span>做家政</div>
          <van-field
            label="* 姓名:"
            type="text"
            v-model="user.username"
            :rules="userFormRules.username"
            name="username"
            clickable
            placeholder="请输入姓名"
          />
          <van-field
            maxlength="11"
            label="* 手机号码:"
            type="number"
            v-model="user.mobile"
            :rules="userFormRules.mobile"
            name="mobile"
            clickable
            placeholder="请输入手机号"
          />
          <van-cell>
            <div class="box1" slot="title">* &nbsp; 意向岗位:</div>
            <div slot="title">
              <van-tag
                @click="change(index)"
                :class="sy === index && sy !== false ? 'gaoliang' : ''"
                plain
                round
                v-for="(item, index) in xixi"
                :key="index"
                type="primary"
                >{{ item }}</van-tag
              >
            </div>
          </van-cell>

          <van-cell>
            <div class="box1" slot="title">* &nbsp; 已获证书:</div>
            <div slot="title">
              <van-tag
                plain
                round
                type="primary"
                ref="certificateRefs"
                v-for="(item, index) in xixi1"
                :key="index"
                @click="change1(index)"
                >{{ item.tag }}</van-tag
              >
            </div>
          </van-cell>
          <van-field v-model="nativePlace" label="籍贯:" clickable />
          <van-field v-model="slte" label="现居住地:" clickable />
          <van-field
            readonly
            clickable
            :value="value"
            label="意向家政公司:"
            placeholder="点击选择"
            label-width="90px"
            @click="isHouseCompanyShow = true"
          />
          <van-popup v-model="isHouseCompanyShow" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="isHouseCompanyShow = false"
            />
          </van-popup>
          <van-field
            v-model="remark"
            type="textarea"
            autosize
            maxlength="30"
            rows="1"
            label="备注信息："
            clickable
          />
        </div>
        <van-button color="#3F51B5 " block type="info" native-type="submit">
          提交资料
        </van-button>
      </div>
    </div>
  </van-form>
</template>
<script>
import { profession, certificates, companys } from '@/api/job'

export default {
  data () {
    return {
      sy: false, // 意向岗位的索引
      xixi: [], // 意向岗位数组
      xixi1: [], // 已获证书数组
      user: {
        username: '', // 姓名
        mobile: '' // 手机号
      },
      userFormRules: {
        username: [{
          required: true,
          message: '姓名不能为空'
        }],
        mobile: [{
          required: true,
          message: '手机号不能为空'
        }, {
          pattern: /^1[3|5|7|8]\d{9}$/,
          message: '手机号格式错误'
        }]
      },
      value: '',
      name: '',
      nativePlace: '', // 籍贯
      remark: '', // 备注信息
      slte: '', // 地址
      isHouseCompanyShow: false,
      columns: []
    }
  },
  created () {
    this.zhiye()
    this.certificate()
    this.gongsi()
  },
  methods: {
    onConfirm (value) {
      this.value = value
      this.isHouseCompanyShow = false
    },
    async gongsi () {
      const columns = this.columns
      const { data } = await companys()
      // for (var i = 0; i <= data.length; i++) {
      //   this.columns.push(data[i].name)
      // }
      data.forEach((item) => {
        columns.push(item.name)
      })
    },
    async zhiye () {
      const { data } = await profession()
      this.xixi = data[0].tags.splice(0, data[0].tags.length - 1)
    },
    async certificate () {
      const { data } = await certificates()
      this.xixi1 = data
    },
    change (index) {
      this.sy = index
    },
    change1 (index) {
      // classList属性用于在元素中添加，移除及切换 CSS 类
      // contains 该方法是判断字符串中是否有子字符串。如果有则返回true，如果没有则返回false
      if (this.$refs.certificateRefs[index].classList.contains('gaoliang')) {
        this.$refs.certificateRefs[index].classList.remove('gaoliang')
      } else {
        this.$refs.certificateRefs[index].classList.add('gaoliang')
      }
    },
    onSubmit () {
      if (this.sy === false) {
        this.$toast('请填写必要信息')
        return
      }
      this.$toast.success('提交成功')
      this.$router.push('/')
    }

  }
}
</script>
<style lang="less">
.van-form {
  .house-job {
    background-color: #f8f8f8;
    .header {
      height: 160px;
      background-color: #3f51b5;
      color: #fff;
      font-size: 32px;
      padding-top: 20px;
      padding-left: 13px;
      span {
        position: absolute;
        top: 45px;
        left: 72px;
        padding-left: 20px;
        font-weight: 700;
      }
      .tubiao {
        position: absolute;
        top: 52px;
        left: 26px;
        padding-left: 20px;
      }
    }
    .van-button {
      position: fixed;
      bottom: 0;
    }
    .acticle {
      .van-cell__title {
        font-weight: 700;
      }
      border-radius: 8px;
      padding: 5px 0;
      margin-top: -56px;
      margin-left: 24px;
      width: 704px;
      background-color: #fff;
      .box {
        font-weight: 700;
        height: 88px;
        line-height: 88px;
        padding-left: 50px;
        font-size: 32px;
        border-bottom: 1px solid #f8f8f8;
        .chunk {
          position: absolute;
          top: 155px;
          left: 50px;
          width: 8px;
          height: 28px;
          background-color: #3f51b5;
        }
      }
      .username {
        height: 88px;
        font-size: 28px;
        border-bottom: 1px solid #f8f8f8;
      }

      .van-cell {
        color: #646566;
        .van-tag {
          font-weight: normal;
          font-size: 20px;
          height: 46px;
          line-height: 46px;
          padding: 0 25px;
          margin: 10px;
          color: #a49f9f;
        }
      }
    }
    .data-btn {
      margin-top: 48px;
    }
    .gaoliang {
      color: #3f51b5 !important;
    }

    .diliang {
      color: red !important;
    }
  }
}
</style>
